<template>
  <div class="login-container">
    <div class="form-area">
      <ul class="title">
        <li :class="{ btn: true, current: step === 'invite' }">邀请码</li>
        <li>·</li>
        <li :class="{ btn: true, current: step === 'register' }">注册</li>
      </ul>
      <login-form
        ref="inviteRef"
        v-if="step === 'invite'"
        :config="inviteConfig"
        :form="inviteForm"
      ></login-form>
      <login-form
        ref="registerRef"
        v-if="step === 'register'"
        :config="registerConfig"
        :form="registerForm"
        :rules="registerRule"
        :needVerifyCode="true"
      ></login-form>
      <div
        class="ope-btn validate-btn"
        v-if="step === 'invite'"
        @click="confirmInvite"
      >
        确认
      </div>
      <div
        class="ope-btn register-btn"
        v-if="step === 'register'"
        @click="submit"
      >
        注册
      </div>
    </div>
  </div>
</template>
<script>
import LoginForm from '../../../components/login-form/login-form.vue'
export default {
  components: {
    // VerifyCode,
    LoginForm
  },
  methods: {
    confirmInvite () {
      const that = this
      this.$refs.inviteRef.validate((err, data) => {
        if (err) {
          return false
        }
        that.$store
          .dispatch('CHECK_CODE', data.inviteCode)
          .then((res) => {
            if (res.status === 200 && res.result) {
              that.step = 'register'
            } else {
              // console.log(res.message)
            }
          })
          .catch(() => {
            // console.log(err.message)
          })
      })
    },
    submit () {
      // 先校验验证码是否正确
      const that = this
      const { inviteForm } = this
      this.$refs.registerRef.validate((err, data) => {
        if (err) {
          return false
        }
        if (data.password !== data.rePassword) {
          // console.log('两次输入的密码不一致，请重新再试')
          return
        }
        this.$store
          .dispatch('REGISTER_USER', {
            password: data.password,
            account: data.account,
            nickName: data.nickName,
            code: inviteForm.inviteCode
          })
          .then((res) => {
            if (res.status === 200) {
              that.$router.replace({
                path: '/user/login'
              })
            }
          }).catch(() => {
            // console.log(err.message)
          })
      })
    }
  },
  data: () => {
    return {
      vCode: '',
      step: 'invite', // invite 邀请码  register 注册
      form: {},
      inviteForm: {},
      inviteConfig: [
        {
          key: 'inviteCode',
          label: '邀请码',
          placeholder: '您的邀请码',
          icon: 'iconfont icon-code'
        }
      ],
      registerForm: {
        nickName: '',
        account: '',
        password: '',
        rePassword: ''
      },
      registerConfig: [
        {
          key: 'nickName',
          label: '昵称',
          placeholder: '您的昵称',
          icon: 'iconfont icon-user'
        },
        {
          key: 'account',
          label: '账号',
          placeholder: '您的账号',
          icon: 'iconfont icon-account'
        },
        {
          key: 'password',
          label: '密码',
          placeholder: '您的密码',
          icon: 'iconfont icon-password',
          type: 'password'
        },
        {
          key: 'rePassword',
          label: '重复密码',
          placeholder: '重新输入密码',
          icon: 'iconfont icon-password',
          type: 'password'
        }
      ],
      registerRule: {
        nickName: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        rePassword: [{ required: true, message: '请重新输入密码', trigger: 'blur' }]
      }
    }
  }
}
</script>
<style scoped>
input {
  background: none;
  outline: none;
  border: none;
}
input:focus {
  border: none;
}
.login-container {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #f1f1f1;
}
.form-area {
  position: absolute;
  width: 400px;
  max-height: 430px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -265px;
  padding: 50px;
}
.form-area .title {
  color: #969696;
  text-align: center;
  font-size: 18px;
}
.form-area .title > li {
  display: inline-block;
  vertical-align: middle;
  padding: 10px;
  border-bottom: 2px solid #fff;
}
.form-area .title > li.btn.current {
  border-bottom: 2px solid #ea6f5a;
  color: #ea6f5a;
}
.ope-btn {
  width: 300px;
  margin: 30px auto 0;
  padding: 9px 0;
  font-size: 18px;
  border-radius: 25px;
  background: #42c02e;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
</style>
